<template>
<div>
  <el-card class="cardStyle">
    <!-- ready,地图组件渲染完毕时触发，返回一个百度地图的核心类和地图实例 -->
    <baidu-map
      id="map"
      class="mapStyle"
      :center="centerPoint"
      :zoom="15"
      :scroll-wheel-zoom="true"
      @ready="handler"
      @click="getPoint"
    >
      <!--&lt;!&ndash;      缩略图&ndash;&gt;-->
      <!--      <bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen="true"></bm-overview-map>-->

      <!--      比例尺-->
      <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
      <!--      缩放-->
      <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-navigation>
      <!--      地图搜索-->
      <bm-control :offset="{width: '10px', height: '10px'}">
        <bm-auto-complete v-model="keyword" :sugStyle="{zIndex: 1}">
          <label>关键词：<input v-model="keyword"></label> <!-- 这里指代一个自定义搜索框组件 -->
        </bm-auto-complete>
      </bm-control>
      <bm-local-search :keyword="keyword" :auto-viewport="true" ></bm-local-search>
      <!--      地图类型-->
      <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-map-type>

      <!--      定位-->
      <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
      <!--      全景-->
      <bm-panorama></bm-panorama>
<!--      红点-->
      <bm-marker
        v-for="marker in markerArr"
        :key="marker.id"
        :position="marker"
        animation="BMAP_ANIMATION_BOUNCE"
      />
    </baidu-map>
  </el-card>
</div>
</template>

<script>

export default {

  name: "map",
  data() {
    return {
      location: '',
      keyword: '',
      //中心轴坐标
      centerPoint: {
        lng: 0,
        lat: 0,
      },
      markerArr: [
        {
          id: 0,
          lng: 116.307279,
          lat: 40.046999,
        },
      ],
      markerPoint: {},
    };
  }, methods: {
    // 完成一次组件卸载 / 重新加载的方法，重新渲染
    handler() {
      this.centerPoint.lng = 116.307279;
      this.centerPoint.lat = 40.046999;
    },
    // 添加点击函数，点击后修改marker的经纬度
    getPoint(e) {
      // 点击获取point经纬度
      const { lng, lat } = e.point;

      // 获取一个随机不重复的字符串做为id
      let id = new Date().getTime() + parseInt(Math.random() * 10000);
      this.markerArr=[];
      // 新增一个marker标记
      this.markerArr.push({
        id: id,
        lng: lng,
        lat: lat,
      });
    },
  },
}
</script>

<style scoped>
.mapStyle {
  width: 100%;
  height: calc(100vh - 130px);
}
.cardStyle {
  height: calc(100vh - 130px);
}
</style>
